<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度换肤</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: url("images/1.jpg") no-repeat;
        }

        .box {
            padding: 40px 0;
            text-align: center;
            background: rgba(255, 255, 255, 0.3);
        }

        .box img {
            width: 150px;
        }
    </style>

    <script src="libs/jquery3_1_1.min.js"></script>

    <script>
        window.onload = function () {

            //jquery方式写的
            /*$("img").css("opacity","0.4");
             $("img").eq(0).css("border","1px solid white").css("opacity","1");
             $("img").click(function () {
             $(this).css("border","1px solid white").css("opacity","1").siblings().css("border","none").css("opacity","0.4");
             document.body.style.backgroundImage = "url(" + $(this).attr('src') + ")";
             });*/


            //常规方式写
            var currentPosition = 0;
            var imgs = document.getElementsByTagName("img");
            for (var i = 0; i < imgs.length; i++) {
                /*imgs[i].onclick = function () {
                    document.body.style.backgroundImage = "url(" + this.getAttribute('src') + ")";
                }*/

                imgs[i].index = i;
                imgs[i].onclick = function () {
                    var src = imgs[this.index].getAttribute('src');
                    document.body.style.backgroundImage = "url("+src+")";
                }
            }
        }
    </script>
</head>
<body>
<div class="box">
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
    <img src="images/4.jpg" alt="">
    <img src="images/5.jpg" alt="">
</div>
</body>
</html>